import React, { Component } from 'react'
import { connect } from 'react-redux'
import { increment, decrement } from '../../store/actions';
import "./count.css"
/**
 * 创建react计数组件
 */
class count extends Component {

    constructor(props, context) { 
        super(props)
        console.log("props:", props)
        this.state = {
            count:props.count
        }
    }

    handleIncrement = () => { 
        this.props.increment(1)
        console.log("加：", this.props)
    }

    handleDecrement = () => { 
        this.props.decrement(1)
        console.log("减：", this.props)
    }

    render() {
        return (
            <div className='count-container'>
                <div className="header">
                    <h1 className='title'>当前统计：{ this.props.count }</h1>
                </div>
                <div className="sub-header">
                    <div className="btn btn-add" onClick={this.handleIncrement}>加</div>
                    <div className="btn btn-delete" onClick={this.handleDecrement}>减</div>
                </div>
            </div>
        )
    }
}

/**
 * 
 * @param {*} state 
 * @returns 
 */
function mapStateToProps(state) { 
    return { 
        count:state.count
    }
}

/**
 * 
 * @param {*} dispatch 
 * @returns 
 */
const mapDispatchToProps = function (dispatch) { 
    return {
        increment: (number) => dispatch(increment(number)),
        decrement: (number) => dispatch(decrement(number)),
    }
}

/**
 * 导出计数容器组件
 */
export default connect(mapStateToProps, mapDispatchToProps)(count)